<template>
	<view class="pages">

		<view class="phoneContent" style="margin-top: 20rpx;">
			<view class="name">收货人</view>
			<input placeholder="请输入收货人" placeholder-class="placeholder" class="input" v-model="name" maxlength="text" />
		</view>

		<view class="phoneContent">
			<view class="name">手机号</view>
			<input placeholder="请输入手机号" placeholder-class="placeholder" class="input" v-model="phone" maxlength="11"
				@blur="blurPhone" />
		</view>

		<view class="phoneContent" @tap="openPicker">
			<view class="name">所在地址</view>
			<input placeholder="请选择省/市/区" placeholder-class="placeholder" class="input" v-model="provinces" disabled
				@tap="openPicker" />
		</view>

		<view class="phoneContent">
			<view class="name">详细地址</view>
			<textarea placeholder="请输入详细地址（门牌号）" placeholder-class="placeholder" class="input" v-model="address"
				maxlength="80" />
		</view>

		<!-- <view class="addInput">
			<view class="inputTitle">收货人</view>
			<input placeholder="请输入收货人" placeholder-class="placeholder" v-model="name" maxlength="5" type="text" />
		</view>
		<view class="addInput">
			<view class="inputTitle">手机号</view>
			<input placeholder="请输入手机号" placeholder-class="placeholder" v-model="phone"  maxlength="11" @blur="blurPhone" />
		</view>
		<view class="addInput" @tap="openPicker">
			<view class="inputTitle">所在地址</view>
			<input placeholder="请选择省/市/区" placeholder-class="placeholder" v-model="provinces" disabled @tap="openPicker" />
		</view>
		<view class="title">详细地址</view>
		<textarea class="textArea" placeholder="请输入详细地址（门牌号）" placeholder-class="textPlaceholder" v-model="address" maxlength="80"></textarea> -->

		<!-- 设置默认地址 -->
		<radio-group @tap="chooseType()" class="radio">
			<label>
				<radio color="rgba(83, 167, 0, 1)" :checked="isSet" />设置默认地址
			</label>
		</radio-group>
		<!-- 保存 -->
		<view class="submit" :class="name && phone && provinces && address?'loginContentSubmit':''"
			@tap="submitAddress">立即添加</view>
		<!-- 省市区三级联动组件 -->
		<lotusAddress v-on:choseVal="choseValue" :json="lotusAddressJson" :lotusAddressData="lotusAddressData">
		</lotusAddress>
	</view>
</template>

<style>
	page {
		background-color: rgba(246, 246, 247, 1);
	}
</style>
<script>
	import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	import {
		addAddress,
		editAddress,
		getBaseAreaList
	} from '../../api/api.js'
	export default {
		components: {
			lotusAddress
		},
		data() {
			return {
				// 地址id
				addressId: '',
				// 收货人
				name: '',
				// 手机号
				phone: '',
				lotusAddressData: {
					visible: false,
					// 省
					provinceName: '',
					// 市
					cityName: '',
					// 区
					townName: '',
				},
				// 省市区
				provinces: '',

				// 详细地址
				address: '',
				// 标签索引
				labeIndex: 0,
				// 标签列表
				labelList: ['家', '公司', '学校'],
				// 是否设置默认 默认为false
				isSet: false,
				addressInfo: '',
				lotusAddressJson: [],
			}
		},
		onLoad(e) {
			// 获取地址
			getBaseAreaList().then(res => {
				this.lotusAddressJson = res.data
			})
			// e.isEdit为1时,是编辑地址
			if (e.isEdit == 1) {
				this.addressInfo = e.item.replace(/""/g, "");
				this.addressInfo = JSON.parse(this.addressInfo)
				this.name = this.addressInfo.fullName
				this.phone = this.addressInfo.mobile
				this.provinces = this.addressInfo.provinceText + this.addressInfo.cityText + this.addressInfo.areaText
				this.lotusAddressData.provinceName = this.addressInfo.provinceText
				this.lotusAddressData.cityName = this.addressInfo.cityText
				this.lotusAddressData.townName = this.addressInfo.areaText
				this.address = this.addressInfo.address
				this.addressId = this.addressInfo.id
				// this.labeIndex = this.addressInfo.tag == '家'?0:this.addressInfo.tag == '公司'?1:2
				this.isSet = this.addressInfo.isDefault == 1 ? true : false
			}
		},
		methods: {
			// 监听手机号
			blurPhone() {
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					this.phone = ''
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}
			},
			// 选择标签
			chooseLabel(item, index) {
				this.labeIndex = index
			},
			// 设置默认
			chooseType() {
				this.isSet = !this.isSet
			},
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
				this.lotusAddressData.provinceName = '广东省';
				this.lotusAddressData.cityName = '广州市';
				this.lotusAddressData.townName = '白云区';
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.provinces = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			},
			// 保存地址
			submitAddress() {
				if (!this.name) {
					uni.showToast({
						title: '请输入收货人',
						icon: 'none'
					})
					return false
				} else if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false
				} else if (!this.provinces) {
					uni.showToast({
						title: '请输入省/市/区',
						icon: 'none'
					})
					return false
				} else if (!this.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return false
				}
				if (!this.addressId) {
					var data = {
						fullName: this.name,
						mobile: this.phone,
						provinceText: this.lotusAddressData.provinceName,
						cityText: this.lotusAddressData.cityName,
						areaText: this.lotusAddressData.townName,
						address: this.address,
						isDefault: this.isSet ? 1 : 0,
						// tag:this.labelList[this.labeIndex]
					}
				} else {
					var data = {
						fullName: this.name,
						mobile: this.phone,
						provinceText: this.lotusAddressData.provinceName,
						cityText: this.lotusAddressData.cityName,
						areaText: this.lotusAddressData.townName,
						address: this.address,
						isDefault: this.isSet ? 1 : 0,
						// tag:this.labelList[this.labeIndex],
						id: this.addressId,
					}
				}
				editAddress(data).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					uni.navigateBack({
						delta: 1
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.pages {
		padding-top: 20rpx;
		letter-spacing: 1rpx;
		box-shadow: inset 0px 4px 8px 0rpx rgba(0, 0, 0, 0.05);

		display: flex;
		align-items: center;
		flex-direction: column;

		// 手机号
		.phoneContent {
			background-color: #fff;
			position: relative;
			width: 662rpx;
			padding: 28rpx 20rpx 16rpx 28rpx;

			.name {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 36rpx;
			}

			.placeholder {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #BCBDBD;
				line-height: 26rpx;
			}

			.input {
				margin-top: 24rpx;
				height: 56rpx;
				width: 100%;
				border-bottom: 1rpx solid rgba(249, 249, 249, 1);
			}

			.codeContent {
				position: absolute;
				right: 40rpx;
				bottom: 20rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(83, 167, 0, 1);
				line-height: 37rpx;
			}
		}

		.radio {
			width: 710rpx;
			margin: 50rpx 0 0 30rpx;
		}

		radio .wx-radio-input {
			width: 30rpx;
			height: 30rpx;
			border: #808080 solid;
		}

		radio .wx-radio-input.wx-radio-input-checked {
			border-color: #F7533E;
			background: linear-gradient(134deg, rgba(255, 116, 98, 0.99) 0%, #D71F36 100%);
		}

		// 保存
		.submit {
			margin-top: 60rpx;
			text-align: center;
			line-height: 88rpx;
			width: 670rpx;
			height: 88rpx;
			background: #E1E1E1;
			border-radius: 88rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.loginContentSubmit {
			background-color: rgba(83, 167, 0, 1);
		}
	}
</style>